{% extends 'base.html'%}{% load staticfiles %}
{% block style %}
<style type="text/css">
   h2,div{
        text-align: center;
    }
</style>
{% endblock %}



{% block title %}{{pageData.title}}{% endblock %}
{% block content %}
<div class="page-header">
	<h2>点击查看详情哦  <span class="label label-default">共200页</span></h2>
	
</div>
<br>
<div class="row">
	<img src="{% static 'imgs/main/p1.jpg' %}" class="img-rounded col-md-2 col-sm-4 col-xs-6 portraits"/>
	<img src="{% static 'imgs/main/p2.jpg' %}" class="img-rounded col-md-2 col-sm-4 col-xs-6 portraits"/>
	<img src="{% static 'imgs/main/p3.jpg' %}" class="img-rounded col-md-2 col-sm-4 col-xs-6 portraits"/>
	<img src="{% static 'imgs/main/p4.jpg' %}" class="img-rounded col-md-2 col-sm-4 col-xs-6 portraits"/>
	<img src="{% static 'imgs/main/p3.jpg' %}" class="img-rounded col-md-2 col-sm-4 col-xs-6 portraits"/>
	<img src="{% static 'imgs/main/p2.jpg' %}" class="img-rounded col-md-2 col-sm-4 col-xs-6 portraits"/>
</div>
<br>
<div class="row">
	<img src="{% static 'imgs/main/p4.jpg' %}" class="img-rounded col-md-2 col-sm-4 col-xs-6 portraits"/>
	<img src="{% static 'imgs/main/p3.jpg' %}" class="img-rounded col-md-2 col-sm-4 col-xs-6 portraits"/>
	<img src="{% static 'imgs/main/p2.jpg' %}" class="img-rounded col-md-2 col-sm-4 col-xs-6 portraits"/>
	<img src="{% static 'imgs/main/p1.jpg' %}" class="img-rounded col-md-2 col-sm-4 col-xs-6 portraits"/>
	<img src="{% static 'imgs/main/p2.jpg' %}" class="img-rounded col-md-2 col-sm-4 col-xs-6 portraits"/>
	<img src="{% static 'imgs/main/p3.jpg' %}" class="img-rounded col-md-2 col-sm-4 col-xs-6 portraits"/>
</div>
<br><br>
<div class="navbar navbar-fixed-bottom">
	<ul class="pagination pagination-lg">
		<li class="contentlist"><a href="">&laquo;</a></li>
		<li class="contentlist"><a href="{% url 'cospicture1' 1 %}">1</a></li>
		<li class="contentlist"><a href="{% url 'cospicture1' 2 %}">2</a></li>
		<li class="contentlist"><a href="{% url 'cospicture1' 3 %}">3</a></li>
		<li class="contentlist"><a href="{% url 'cospicture1' 4 %}">4</a></li>
		<li class="contentlist"><a href="{% url 'cospicture1' 5 %}">5</a></li>
		<li class="contentlist"><a href="{% url 'cospicture1' 6 %}">6</a></li>
		<li class="contentlist"><a href="">&raquo;</a></li>
	</ul>
</div>
{% endblock %}

{% block script %}
	<script type="text/javascript">
		function formatNum(num){
			if(num<10){
		  		return '00'+num;
			}else if(num<100){
			 	return '0'+num;
			}else{
			 	return num;
			}
		}

		$(function(){
		    var num={{pageData.pageCos}}
		    $('li.contentlist').eq(num).addClass('active')
		    var path = "{% static 'imgs/pic1.jpg' %}"
		    for(var i=1;i<9;i++){
		    	// path = path.replace('imgs/pic1.jpg','imgs/beautifulCosor/'+formatNum((num-1)*8+i)+'/cosplay'+formatNum((num-1)*8+i-1)+'1.jpg')
		    	// path = path.replace('imgs/pic1.jpg','imgs/beautifulCosor/'+i+'/cosplay'+(i-1)+'1.jpg')
		    	$('.portraits').eq(i-1).attr('src',path)
		    	path = "{% static 'imgs/pic1.jpg' %}"
		    }
			$('li.contentlist').click(function(){
		        $(this).addClass('active');
		        $('.contentlist').not($(this)).removeClass('active');
			})
		})
	</script>
{% endblock %}